<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>我的挂号</span>
        <el-button
          style="padding: 3px 0"
          type="text"
          @click="register"
        >预约挂号</el-button>
      </div>
      <el-table :data="tableData" height="1050px" border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-card class="box-card" shadow="hover" style="margin: 10px 20px">
              <div slot="header" class="clearfix">
                <span>诊疗内容</span>
              </div>
              <div v-if="props.row.register_status">
                <span>{{ props.row.symptom }}</span>
                <el-divider content-position="right">症状</el-divider>
                <span>{{ props.row.check_result }}</span>
                <el-divider content-position="right">检查结果</el-divider>
                <span>{{ props.row.medicine }}</span>
                <el-divider content-position="right">治疗药物</el-divider>
              </div>
              <div v-if="!props.row.register_status"><span>暂无内容</span></div>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="register_id" label="挂号单号" width="140" />
        <el-table-column prop="self_name" label="本人姓名" width="100" />
        <el-table-column prop="self_id" label="本人ID" width="100" />
        <el-table-column prop="doctor_name" label="医生姓名" width="100" />
        <el-table-column prop="doctor_id" label="医生ID" width="100" />
        <el-table-column
          prop="register_date"
          sortable
          label="挂号日期"
          width="200"
        />
        <el-table-column prop="register_time" label="挂号时段" width="200" />
        <el-table-column
          prop="register_department"
          label="挂号科室"
          width="200"
        />
        <el-table-column prop="register_position" label="就诊诊室" width="200" />
        <el-table-column prop="register_status" label="就诊状态" width="100">
          <template slot-scope="scope">
            <el-tag
              v-if="!scope.row.register_status"
              type="warning"
              effect="dark"
              size="medium"
            >等待就诊</el-tag>
            <el-tag
              v-if="scope.row.register_status"
              type="success"
              effect="dark"
              size="medium"
            >完成就诊</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 预约挂号 -->
    <el-dialog
      title="预约挂号"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="挂号单号" label-width="120px">
          <el-input v-model="form.register_id" :disabled="true" />
        </el-form-item>
        <el-form-item label="本人姓名" label-width="120px">
          <el-input v-model="form.self_name" :disabled="true" />
        </el-form-item>
        <el-form-item label="本人姓名" label-width="120px">
          <el-input v-model="form.self_id" :disabled="true" />
        </el-form-item>
        <el-form-item label="挂号日期" label-width="120px">
          <el-date-picker
            v-model="form.register_date"
            type="date"
            placeholder="请选择"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="挂号时段" label-width="120px">
          <el-time-select
            v-model="form.register_time"
            :picker-options="{
              start: '09:00',
              step: '00:30',
              end: '17:00',
            }"
            placeholder="选择时间"
          />
        </el-form-item>
        <el-form-item label="挂号科室" label-width="120px">
          <div class="block">
            <el-cascader
              v-model="form.register_department"
              placeholder="试试搜索：胸外科"
              :props="{ expandTrigger: 'hover' }"
              :options="options"
              filterable
              style="width: 220px"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="margin-left: 400px; margin-top: 30px"
            @click="onSubmit"
          >立即预约</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRegisterInfo,
  setRegisterInfo,
  delRegisterInfo
} from '@/api/registerInfo'
export default {
  name: 'PageOne',
  data() {
    return {
      registerdate: '',
      registertime: '',
      dialogVisible: false,
      form: {
        register_id: '',
        self_name: '张三',
        self_id: 1905288,
        register_time: '',
        register_date: '',
        register_department: ''
      },
      tableData: [],
      options: [
        {
          value: '内科系统',
          label: '内科系统',
          children: [
            {
              value: '内分泌科',
              label: '内分泌科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '肾病科',
              label: '肾病科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '血液科',
              label: '血液科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '肿瘤内科',
              label: '肿瘤内科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '糖尿病专科',
              label: '糖尿病专科'
            },
            {
              value: '生殖免疫门诊',
              label: '生殖免疫门诊'
            }
          ]
        },
        {
          value: '外科',
          label: '外科',
          children: [
            {
              value: '普外科',
              label: '普外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '神经外科',
              label: '神经外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '泌尿外科',
              label: '泌尿外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '血管外科',
              label: '血管外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: '胸外科',
              label: '胸外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: 'gandanwaike',
              label: '肝胆外科',
              children: [
                {
                  value: '梅毛冰',
                  label: '梅毛冰医生'
                }
              ]
            },
            {
              value: 'qixiongmenzhen',
              label: '气胸门诊'
            }
          ]
        },
        {
          value: 'fuchanke',
          label: '妇产科',
          children: [
            {
              value: 'neifenmike',
              label: '内分泌科'
            },
            {
              value: 'shenbingke',
              label: '肾病科'
            },
            {
              value: 'xueyeke',
              label: '血液科'
            },
            {
              value: 'zhongliuneike',
              label: '肿瘤内科'
            },
            {
              value: 'tangniaobingzhuanke',
              label: '糖尿病专科'
            },
            {
              value: 'shengzhimianyimenzhen',
              label: '生殖免疫门诊'
            }
          ]
        },
        {
          value: 'erke',
          label: '儿科',
          children: []
        },
        {
          value: 'yanke',
          label: '眼科',
          children: []
        },
        {
          value: 'erbiyanhouke',
          label: '耳鼻喉科',
          children: []
        },
        {
          value: 'kouqiangke',
          label: '口腔科',
          children: []
        },
        {
          value: 'pifuke',
          label: '皮肤科',
          children: []
        }
      ]
    }
  },
  created() {
    this.getRegisterInfo()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async getRegisterInfo() {
      // 获取挂号记录
      const data = await getRegisterInfo()
      // console.log(data);
      this.tableData = data.data.message
      this.tableData.forEach((item) => {
        item.register_date = item.register_date.slice(0, 10)
        item.medicine = JSON.parse(item.medicine)
      })
    },
    register() {
      // 预约挂号
      // 调⽤获取当前⽇期的⽅法加四位随机数赋值表单中的项⽬编号
      this.form.register_id =
        new Date().getTime() + Math.floor(Math.random() * 10000) // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就⾏了
      this.dialogVisible = true
    },
    handleClick(row) {
      // 删除挂号记录
      this.$confirm('此操作将永久删除该条挂号记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delRegisterInfo({
            ...row
          })
          this.getRegisterInfo()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async onSubmit() {
      // 提交挂号表单
      await setRegisterInfo({
        ...this.form
        // state: this.form.state ? 1 : 0
      })
      this.form.register_date = ''
      this.form.register_time = ''
      this.form.register_department = ''
      this.getRegisterInfo()
      this.$message({
        message: '恭喜你，挂号成功',
        type: 'success'
      })
      this.dialogVisible = false
    }
  }
}
</script>
